<template>
	<view class="setting-page">
		<u-cell-group>
			<u-cell-item title="头像">
				<u-avatar slot="right-icon" size="80" :src="userInfo.icon"></u-avatar>
			</u-cell-item>
			<u-cell-item title="昵称" :value="userInfo.nickname"></u-cell-item>
			<u-cell-item title="性别" :value="gender"></u-cell-item>
			<u-cell-item title="生日" :value="userInfo.birthday  || '未填写'"></u-cell-item>
			<u-cell-item title="职业" :value="userInfo.job || '未填写'"></u-cell-item>
		</u-cell-group>
		<view class="logout-wrap">
			<u-button type="error" :ripple="true" @click="logout">退出登录</u-button>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters({
				userInfo: 'user/userInfo'
			}),
			gender () {
				switch (this.userInfo.gender){
					case 0:
						return '保密'
					case 1:
						return '男'
					case 2:
						return '女'
					default:
						return '保密'
				}
				return 
			}
		},
		methods: {
			logout () {
				this.$store.commit('user/UPDATE_LOGOUT')
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.setting-page {
		.logout-wrap {
			position: absolute;
			bottom: 100rpx;
			left: 0;
			right: 0;
			padding: 0 40rpx;
		}
	}
</style>
